<template>
  <div class="flex-row">
    <router-link v-for="(item,index) in data" :key="index" class="flex-item" 
      :to="/bookdetail/+item.id"
    >
      <book-item :CPNgrade="item.grade" :CPNimgurl="item.img">
        <span slot="name">{{item.book}}</span>
      </book-item>
    </router-link>
  </div>
</template>

<script>
import BookItem from '@/components/BookItem.vue'
export default {
  components:{
    BookItem
  },
  data(){
    return {
      
    }
  },
  props:{
    data:Array
  }
}
</script>

<style>
.flex-row{
  display: flex;
  flex-wrap: wrap;
  padding: 0 15px;
  justify-content: space-between;
}
.flex-item{
  flex: 108px 0 0;
  margin-bottom: 10px;
}
</style>